import React from "react";
import './HerosSearch.css'
import PubSub from 'pubsub-js'

function HerosSearch(props) {
    let input = React.useRef();
    let serach = () => {
        // 获取输入框值
        let value = input.current.value;
        // 发布
        PubSub.publish("keyword", value);
    }

    let keyup = (e) => {
        if (e.keyCode === 13) {
            serach();
        }
    }

    return (
        <div className="searchName">
            <h3>王者英雄展示</h3>
            <hr />
            <div className="box">
                <input onKeyUp={keyup} ref={input} type="search" placeholder="请输入英雄关键字..." />
                <button onClick={serach}>搜索</button>
            </div>
        </div>
    )

};
export default HerosSearch;
